import React, { Component } from 'react'
import { Modal, Transfer, message, LocaleProvider } from 'antd';
import httpFetch from 'share/httpFetch';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
export default class ExpenseTransfer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      key: 0,
      data: [],
      chooseList: [],
      selectedKeysList: []
    };
  }
  componentDidMount() {
    this.getIntiData();
  }
  getIntiData = () => {
    const { extraParams } = this.props;
    let url = `/api/my/cost/center/items?page=${0}&size=${999}`;
    httpFetch.get(url, extraParams).then(res => {
    //   console.log(res);
      if (res.status === 200) {
        this.setState({
          data: res.data
        });
      }
    }).catch(err => {
      message.error(err);
    });
  }
  onOk = () => {
    console.log(this.state.selectedKeysList)
    const { selectedKeysList, data, chooseList } = this.state;
    let arr = [];
    let list = [];
    console.log(this.state)
    if (chooseList.length > 0 && selectedKeysList.length > 0) {
      chooseList.map((e, k) => {
        selectedKeysList.map((i, j) => {
          if (e === i) {
            arr.push(e)
          }
        })
      });
      if (arr.length > 0) {
        data.map((e, k) => {
          arr.map((i, j) => {
            if (e.costCenterItemOID === i) {
              list.push(e);
            }
          });
        });
      }
      console.log(list)
      this.setState({
        key: this.state.key + 1
      });
      this.props.onOk(list);
    } else {
      this.setState({
        key: this.state.key + 1
      });
      this.props.onOk();
    }
  }
  onCancel = () => {
    this.setState({
      key: this.state.key + 1
    });
    this.props.onCancel();
  }
  handleChange = (list) => {
    this.setState({
      chooseList: list
    });
  }
  handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
    this.setState({
      selectedKeysList: [...sourceSelectedKeys, ...targetSelectedKeys]
    });
  }
  render() {
    const { visible, locale } = this.props;
    // console.log(locales)
    return (
      <Modal
        title="请选择成本中心分摊项"
        visible={visible}
        onOk={this.onOk}
        onCancel={this.onCancel}
        width={750}
        destroyOnClose={true}
      >
        <LocaleProvider locale={zh_CN}>
          <Transfer
            className="expense-transfer"
            listStyle={{
              height: 400,
              width: 300
            }}
            dataSource={this.state.data}
            render={record => record.name}
            targetKeys={this.state.chooseList}
            onChange={this.handleChange}
            rowKey={record => record.costCenterItemOID}
            selectedKeys={this.state.selectedKeysList}
            onSelectChange={this.handleSelectChange}
            locale
            // transferLocale={{ itemUnit: '项', itemsUnit: '项' }}
            // locale={zh_CN}
          />
        </LocaleProvider>
      </Modal>
    )
  }
}
